<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面相关</title>
</head>
<body>
<input type="text">
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<input type="button" value="按钮4">
<div>我是小小div</div>

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script>
        //创建元素对象
        let h = $("<h1>我是h1</h1>");
        //把元素对象添加到某个元素里面
        $("body").append(h);

        $("input:eq(1)").click(function () {
            //val()取出文本框的值
            //text("xxx")给元素的文本赋值
            //取出文本框的值给到div
            $("div").text($("input:first").val());

            //删除掉h1
            $("h1").remove();
        });

        $("input:eq(2)").click(function () {
            $("h1").hide();
        });

        $("input:eq(3)").click(function () {
            $("h1").show();
        });

        $("input:eq(4)").click(function () {
            $("h1").toggle();//切换
        });

    </script>
</body>
</html>